<template>
    <view class="pages" :class="GlobalThemes.commonBackGroundClass">
        <view class="search-top-box" id="navbar">
            <u-navbar
                :is-back="false"
                back-icon-color="#ffffff"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
                <view class="slot-wrap"><view class="search-wrap"></view></view>
            </u-navbar>
        </view>
        <view v-if="videosTypeList && videosTypeList.length > 0">
            <u-sticky :offset-top="topFixed" :h5-nav-height="navHeight" @fixed="fixed" @unfixed="unfixed">
                <!-- 顶部主分类 -->
                <view class="do-fixed">
                    <view v-if="showFill" class="padding-20"></view>
                    <view class="filter-box" v-if="videosTypeList && videosTypeList.length > 0">
                        <scroll-view scroll-x class="nav" scroll-with-animation>
                            <view
                                class="cu-item"
                                :class="index == TabCur ? 'cur' : 'text-my-white'"
                                v-for="(item, index) in videosTypeList"
                                :key="index"
                                @tap="tabSelect"
                                :data-id="index"
                                :data-type_id="item.type_id"
                                :style="{ borderBottomColor: typelist[tabIndex].color }"
                            >
                                {{ item.type_name }}
                            </view>
                        </scroll-view>
                    </view>
                    <!-- 筛选 地区 -->
                    <view class="filter-box" v-if="videosTypeList[TabCur].type_name == '电影'">
                        <scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollMap1Left">
                            <view
                                class="cu-tag radius filter-item"
                                :class="index == TabMap2Cur ? 'cur' : 'text-my-white'"
                                v-for="(item, index) in videosMap1List"
                                :key="index"
                                @tap="videoMap2Select"
                                :data-id="index"
                                :data-area="item.vod_area"
                            >
                                {{ item.vod_area }}
                            </view>
                        </scroll-view>
                    </view>

                    <!-- 筛选 子分类 -->
                    <view class="filter-box" v-if="videosTypeList[TabCur]._c && videosTypeList[TabCur]._c.length > 0">
                        <scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollMap1Left">
                            <view
                                class="cu-tag radius filter-item"
                                :class="index == TabMap1Cur ? 'cur' : 'text-my-white'"
                                v-for="(item, index) in videosTypeList[TabCur]._c"
                                :key="index"
                                @tap="videoMap1Select"
                                :data-id="index"
                                :data-type_id_1="item.type_id"
                            >
                                {{ item.type_name }}
                            </view>
                        </scroll-view>
                    </view>

                    <!-- 筛选 时间 -->
                    <view class="filter-box" v-if="videosMap3List && videosMap3List.length > 0">
                        <scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollMap3Left">
                            <view
                                class="cu-tag radius filter-item"
                                :class="index == TabMap3Cur ? 'cur' : 'text-my-white'"
                                v-for="(item, index) in videosMap3List"
                                :key="index"
                                @tap="videoMap3Select"
                                :data-id="index"
                                :data-year="item.vod_year"
                            >
                                {{ item.vod_year }}
                            </view>
                        </scroll-view>
                    </view>
                </view>
            </u-sticky>
            <!-- 下面的筛选及列表 -->
            <view class="list-box">
                <!-- 视频列表 -->
                <view class="videos-list" :style="{paddingTop: bottomTop + 'px'}">
                    <!-- #ifdef MP-WEIXIN -->
                    <!-- 广告 -->
                    <Adview v-if="adSwitchKg" :adSwitchKg="adSwitchKg" :homeADList="oneAd"></Adview>
                    <!-- #endif -->
                    <u-waterfall v-model="flowList" add-time="200" ref="uWaterfall">
                        <template v-slot:left="{ leftList }">
                            <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goDetail(item)">
                                <u-lazy-load
                                    threshold="-450"
                                    border-radius="10"
                                    :image="item.vod_pic"
                                    :index="index"
                                ></u-lazy-load>
                                <view class="demo-title">{{ item.vod_name }}</view>
                            </view>
                        </template>
                        <template v-slot:right="{ rightList }">
                            <view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goDetail(item)">
                                <u-lazy-load
                                    threshold="-450"
                                    border-radius="10"
                                    :image="item.vod_pic"
                                    :index="index"
                                ></u-lazy-load>
                                <view class="demo-title">{{ item.vod_name }}</view>
                            </view>
                        </template>
                    </u-waterfall>
                    <!-- <u-loadmore
                        :style="{ paddingTop: listTop + 'px' }"
                        bg-color="rgb(255, 255, 255)"
                        :status="loadmore"
                        @loadmore="getVideosList"
                        :is-dot="true"
                        :load-text="loadText"
                        icon-type="flower"
                    ></u-loadmore> -->
                </view>
            </view>
        </view>
        <view v-else id="topFixed" @click="getVideosList(true)" class="no-empty"><u-empty mode="data"></u-empty></view>

        <u-tabbar
            id="uTabbar"
            v-model="tarbarObj.tarbarCurrent"
            :list="tarbarObj.tarbarList"
            :border-top="true"
            :mid-button="tarbarObj.midButton"
            bg-color="#fff"
            :inactiveColor="typelist[tabIndex].color"
            :activeColor="tarbarObj.activeColor"
            icon-size="40"
            :height="tarbarObj.height"
            mid-button-size="80"
        ></u-tabbar>
        <!-- 加载条 -->
        <w-loading :text="i18n('common').loading" mask="true" click="false" ref="loading"></w-loading>

        <u-back-top
            :custom-style="{ backgroundColor: typelist[tabIndex].color }"
            :icon-style="{ color: '#ffffff' }"
            :scroll-top="scrollTop"
        ></u-back-top>
    </view>
</template>

<script>
import Adview from '@/components/home-ad/ad-view.vue';
import Methods from './index_methods.js';
export default {
    components: {
        Adview
    },
    ...Methods
};
</script>

<style lang="scss" scoped>
.list-box {

}
.demo-warter {
    border-radius: 8px;
    margin: 5px;
    padding: 8px;
    position: relative;
    background-color: #ffffff;
}
.demo-image {
    width: 100%;
    border-radius: 4px;
}
.demo-title {
    font-size: 30upx;
    margin-top: 5px;
    color: $u-main-color;
    max-width: 300upx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.padding-20{
    padding: 1rem;
    background-color: #FFFFFF;
}
.pages {
    margin: 0;
    padding: 0;
    overflow-y: auto !important;
    .search-top-box {
        .mp-name {
            color: #fff;
            flex: 1;
            padding-left: 40upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slot-wrap {
            display: flex;
            align-items: center;
            flex: 1;

            .search-wrap {
                flex: 1;
                margin: 0 20upx;
            }
        }
    }

    .do-fixed {
        width: 100%;
        // position: fixed;
        // z-index: 19910528;
        .filter-box {
            padding: 10upx 20upx;
            background-color: #ffffff;
        }
        &::after {
            display: block;
            height: 0;
            clear: both;
            content: '';
            background-color: #FFFFFF;
        }
    }

    .videos-list {
        padding: 10upx 0;
    }

    .text-my-white {
        background-color: #ffffff !important;
    }

    .no-empty {
        height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
}
</style>
